<template>
	<view>
		<view class="msg-list">
			<view class="chat-item" v-for="i in msgList" :key="i.id">
				<u-avatar :src="i.src"></u-avatar>
				<view class="info">
					<view class="name u-line-1">{{i.name}}</view>
					<view class="margin-top-xs msg u-line-1">{{i.msg}}</view>
				</view>
				<view class="tags">
					<view class="time">20:20</view>
					<view class="margin-top-xs cu-tag round bg-red sm" v-show="i.number">{{i.number > 99 ? '99+' : i.number}}</view>
				</view>
			</view>
		</view>

		<view class="padding-sm"></view>

		<!-- <view class="chat-list">
			<view class="chat-item" v-for="i in chatList" :key="i.id">
				<u-avatar :src="i.src"></u-avatar>
				<view class="info">
					<view class="name u-line-1">{{i.name}}</view>
					<view class="margin-top-xs msg u-line-1">{{i.msg}}</view>
				</view>
				<view class="tags">
					<view class="time">20:20</view>
					<view class="margin-top-xs cu-tag round bg-red sm" v-show="i.number">{{i.number > 99 ? '99+' : i.number}}</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				msgList: [
					{id: 1, src: '../../static/images/msg-1.png', name: '智能客服', msg: '新功能上线了，快来体验吧！', number: 0},
					{id: 2, src: '../../static/images/msg-2.png', name: '系统通知', msg: '新功能上线了，快来体验吧！', number: 0},
					{id: 3, src: '../../static/images/msg-3.png', name: '交易提醒', msg: '新功能上线了，快来体验吧！', number: 0},
				],
				chatList: [
					{id: 1, src: 'https://picsum.photos/id/1027/200/200', name: '小艾比', msg: '干啥呢', number: 5},
					{id: 2, src: 'https://picsum.photos/id/1024/200/200', name: '再见孙悟空', msg: '欧斯杜父', number: 0},
					{id: 3, src: 'https://picsum.photos/id/1025/200/200', name: '小逗逼', msg: '哦i问佛违反沃尔夫我服务佛问佛无法围殴服务费', number: 0},
					{id: 4, src: 'https://picsum.photos/id/96/200/200', name: '眉头那', msg: '哦哦iu哦i', number: 100},
				]
			};
		},
		onLoad() {
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
	}
</script>

<style lang="scss">
	.chat-item {
		background: #fff;
		padding: 20rpx 20rpx 20rpx 40rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.info {
			width: 520rpx;
			padding: 0 30rpx;

			.name {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				letter-spacing: 2rpx;
			}

			.msg {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				letter-spacing: 2rpx;
			}
		}
		.tags {
			display: flex;
			flex-direction: column;
			align-items: center;
			.time {
				font-size:22rpx;
				font-family:ArialMT;
				color:rgba(153,153,153,1);
			}
		}
	}
</style>
